<!DOCTYPE html>
<html>
<head>
	<!-- Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','GTM-W8KNPT4');</script>
	<!-- End Google Tag Manager -->
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,inital-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="format-detection" content="telephone=no">
    <title>博猫体育</title>
    <link rel="stylesheet" href="css/app.min.css?ver=1.0.000">
    <link rel="stylesheet" href="css/iconfont.css?ver=1.0.000">
    <script src="js/template7.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script src="js/templateHelper.js"></script>
    <script src="js/order.min.js"></script>
    <script src="js/pageLib.js"></script>
</head>
<body>
<div class="header">
	<div class="nav">
		<div class="title">确认订单</div>
		<a href="sporttery.html" class="left-btn"><i class="iconfont icon-xitongfanhui icon-middle"></i></a>
		<a class="right-btn login-bar" href="login.html?from=confirm-order.html">登录 / 注册</a>
		<div class="right-btn user-info-bar" style="display:none;">
			<div class="login flexer">
				<div class="balance">
					<div>余额</div>
					<div>￥888.88</div>
				</div>
				<div class="deposit"><a href="deposit.html">充值</a></div>
			</div>
		</div>
	</div>
</div>
<div class="table-content" style="padding-top:50px;padding-bottom:120px;">
	<!-- <a href="javascript:alert('教程还没写好...');" class="tips">
		<span>小提示</span>
		<p>串关对冲套利怎么玩？</p>
		<i class="iconfont icon-xiayibu"></i>
	</a> -->
	<div class="preload-indicator">
		<span class="preloader"></span>
		<div>正在生成订单...</div>
	</div>
	<!-- <div class="close-time">投注截止：2019-01-21 21:55:00</div>
	<div class="addmatch"><a href="javascript:;">＋ 继续选择比赛</a></div>
	<ul class="list arbitrage-list confirm-list">
		<li class="content-card">
			<div class="selected-match">
				<div class="matchinfo flexer -between">
					<div class="matchkey">周一001 英超</div>
					<div class="match-against">
						<span class="home">曼联</span>
						<span class="against">vs</span>
						<span class="away">阿仙奴</span>
					</div>
				</div>
				
				<div class="bet-table">
					<table>
						<tbody>
							<tr>
								<td>0</td>
								<td>主胜<span class="odds">1.13</span></td>
								<td>平手<span class="odds">4.30</span></td>
								<td class="chosen">客胜<span class="odds">6.81</span></td>
							</tr>
							<tr>
								<td class="negative-handicap">-1</td>
								<td>主胜<span class="odds">2.13</span></td>
								<td>平手<span class="odds">3.20</span></td>
								<td>客胜<span class="odds">2.21</span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</li>
		<li class="content-card">
			<div class="selected-match">
				<div class="matchinfo flexer -between">
					<div class="matchkey">周一001 英超</div>
					<div class="match-against">
						<span class="home">曼联</span>
						<span class="against">vs</span>
						<span class="away">阿仙奴</span>
					</div>
				</div>
				
				<div class="bet-table">
					<table>
						<tbody>
							<tr>
								<td>0</td>
								<td>主胜<span class="odds">1.13</span></td>
								<td>平手<span class="odds">4.30</span></td>
								<td class="chosen">客胜<span class="odds">6.81</span></td>
							</tr>
							<tr>
								<td class="negative-handicap">-1</td>
								<td>主胜<span class="odds">2.13</span></td>
								<td>平手<span class="odds">3.20</span></td>
								<td>客胜<span class="odds">2.21</span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</li>
		<li class="content-card">
			<div class="selected-match">
				<div class="matchinfo flexer -between">
					<div class="matchkey">周一001 英超</div>
					<div class="match-against">
						<span class="home">曼联</span>
						<span class="against">vs</span>
						<span class="away">阿仙奴</span>
					</div>
				</div>
				
				<div class="bet-table">
					<table>
						<tbody>
							<tr>
								<td>0</td>
								<td>主胜<span class="odds">1.13</span></td>
								<td>平手<span class="odds">4.30</span></td>
								<td class="chosen">客胜<span class="odds">6.81</span></td>
							</tr>
							<tr>
								<td class="negative-handicap">-1</td>
								<td>主胜<span class="odds">2.13</span></td>
								<td>平手<span class="odds">3.20</span></td>
								<td>客胜<span class="odds">2.21</span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</li>
		<li class="content-card">
			<div class="selected-match">
				<div class="matchinfo flexer -between">
					<div class="matchkey">周一001 英超</div>
					<div class="match-against">
						<span class="home">曼联</span>
						<span class="against">vs</span>
						<span class="away">阿仙奴</span>
					</div>
				</div>
				
				<div class="bet-table">
					<table>
						<tbody>
							<tr>
								<td>0</td>
								<td>主胜<span class="odds">1.13</span></td>
								<td>平手<span class="odds">4.30</span></td>
								<td class="chosen">客胜<span class="odds">6.81</span></td>
							</tr>
							<tr>
								<td class="negative-handicap">-1</td>
								<td>主胜<span class="odds">2.13</span></td>
								<td>平手<span class="odds">3.20</span></td>
								<td>客胜<span class="odds">2.21</span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</li>
		<li class="content-card">
			<div class="selected-match">
				<div class="matchinfo flexer -between">
					<div class="matchkey">周一001 英超</div>
					<div class="match-against">
						<span class="home">曼联</span>
						<span class="against">vs</span>
						<span class="away">阿仙奴</span>
					</div>
				</div>
				
				<div class="bet-table">
					<table>
						<tbody>
							<tr>
								<td>0</td>
								<td>主胜<span class="odds">1.13</span></td>
								<td>平手<span class="odds">4.30</span></td>
								<td class="chosen">客胜<span class="odds">6.81</span></td>
							</tr>
							<tr>
								<td class="negative-handicap">-1</td>
								<td>主胜<span class="odds">2.13</span></td>
								<td>平手<span class="odds">3.20</span></td>
								<td>客胜<span class="odds">2.21</span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</li>
	</ul> -->
</div>
<div class="operator-bar flexer -between">
	<div class="parlay-method flexer">
		<div class="parlay-select">过关方式</div>
		<!-- <label>过关方式</label>
		<select multiple="multiple">
			<option value="1">2串1</option>
			<option value="1">2串1</option>
			<option value="1">2串1</option>
			<option value="1">2串1</option>
			<option value="1">2串1</option>
		</select> -->
	</div>
	<div class="multiple flexer -right">
		<label>倍数</label>
		<div class="decrease">-</div><input type="number" value="1"><div class="increase">+</div>
	</div>
</div>
<div class="sporttery-confirm-bar bottomBar flexer">
	<div class="flexer">
		<div class="status">
			<div class="chosen"><span>6</span> 注<b>120</b> 元</div>
			<div class="tips">预计奖金：251.75~1660.04元</div>
		</div>
	</div>
	<div class="flex-to-right">
		<a class="submit-btn" href="javascript:;">确定购买</a>
	</div>
</div>

<!-- 过关方式选择面板 Start -->
<div class="parlay-panel" style="display:none;">
	<div class="title">选择过关方式</div>
	<div class="selector">
		<button class="selected">2串1</button>
		<button>3串1</button>
		<button>4串1</button>
		<button>5串1</button>
		<button>6串1</button>
		<button>7串1</button>
		<button>8串1</button>
	</div>
	<div class="control flexer">
		<button class="cancel">取消</button>
		<button class="confirm">确定</button>
	</div>
</div>
<!-- 过关方式选择面板 End -->
</body>
<script type="text/javascript">
$(document).ready(function(){
	pageLib.initAffiliate();
	order.load();
	pageLib.loadUserInfo();
	var processOfMatchList=function(resp){
		// 把比赛信息插入订单对象
		order.insertMatchInfo(resp.data);
		// 通过订单对象渲染订单列表
		var listHtml=TplHelper.renderTplById('confirm-order-list-cell',order.orderObject);
		$('.table-content').html(listHtml);
		// 显示截止投注时间
		$('.close-time').text('投注截止：'+ order.getEarlierCloseTime());
		// 初始化选项
		for(var i in order.orderObject._content_obj){
			for(var j in order.orderObject._content_obj[i].betContent){
				var matchid=order.orderObject._content_obj[i].matchid;
				var playtype='';
				var selectionName='';
				switch(order.orderObject._content_obj[i].betContent[j].playtypeid){
					case order.PLAYTYPEID.SPF:
						playtype='had';
						break;
					case order.PLAYTYPEID.RQSPF:
						playtype='hhad';
						break;
					case order.PLAYTYPEID.JQS:
						// playtype='had';
						// break;
					case order.PLAYTYPEID.BF:
						// playtype='had';
						// break;
					case order.PLAYTYPEID.BQC:
						// playtype='had';
						// break;
					default:
				}
				switch(order.orderObject._content_obj[i].betContent[j].selection){
					case order.SELECTION.HOMEWIN:
						selectionName='homewin';
						break;
					case order.SELECTION.DRAW:
						selectionName='draw';
						break;
					case order.SELECTION.AWAYWIN:
						selectionName='awaywin';
						break;
					default:
				}
				var selectionBtn=$('.confirm-list li[data-matchid='+matchid+'] tr[data-playtype='+playtype+'] td.selection[data-selection='+selectionName+']');
				if(!selectionBtn.hasClass('chosen'))selectionBtn.addClass('chosen');
			}
		}
		// 初始化底栏注数、金额、奖金范围数值
		var updateBottomInfo=function(){
			$('.sporttery-confirm-bar .status .chosen > span').text(order.getCountOfLines());
			$('.sporttery-confirm-bar .status .chosen > b').text(order.getTotalAmount());
			var prizeRange=order.getPrizeRange();
			$('.sporttery-confirm-bar .status .tips').text('预计奖金：'+prizeRange.minPrize+'~'+prizeRange.maxPrize+'元');
		}
		updateBottomInfo();
		// 绑定选项响应事件
		$('.bet-table td.selection').on('click',function(e){
			if(order.getCountOfMatch()>=8)return;
			var target=$(this);
			var matchid=target.parents('.content-card').data('matchid');
			var matchkey=target.parents('.content-card').data('matchkey');
			var matchtime=target.parents('.content-card').data('matchtime');
			var handicap=target.parents('.content-card').data('handicap');
			var odds=target.children('span.odds').data('odds');
			var playtype=target.parent().data('playtype');
			var selection=target.data('selection');
			var draw=target.parents('ul.sporttery-list').data('draw');
			if(target.hasClass('chosen')){
				console.log('Remove: '+matchid+','+playtype+','+selection+','+odds);
				order.remove(matchid,playtype,selection);
				target.removeClass('chosen');
			}
			else{
				console.log('Choose: '+matchid+','+playtype+','+selection+','+odds);
				order.choose(matchid,matchtime,matchkey,draw,handicap,playtype,selection,odds);
				target.addClass('chosen');
			}
			// 更新选择场次数
			var numberOfMatch=order.getCountOfMatch();
			$('.sporttery-choose-bar .chosen > b').text(numberOfMatch);
			var submitBtn=$('.sporttery-choose-bar .submit-btn');
			if(numberOfMatch>=2){
				submitBtn.removeClass('disable');
			}
			else{
				if(!submitBtn.hasClass('disable'))submitBtn.addClass('disable');
			}
			updateBottomInfo();
		});
		// 处理过关方式控件

		// init start
		var maxParlay=order.getCountOfMatch();
		var parlayList=[];
		var selected=order.getParlayList();
		for(var i=2;i<=maxParlay;i++){
			parlayList.push({index:i,selected:selected.indexOf(i+'001')>=0});
		}
		var paylayBtnHtml=TplHelper.renderTplById('parlay-button-tpl',{
			parlay: parlayList
		});
		$('.parlay-panel .selector').html(paylayBtnHtml);
		// 初始化按钮文字
		$('.parlay-method .parlay-select').text(selected.sort().join(',').replace(new RegExp(/(001)/g),'串1'));

		// init end

		$('.parlay-method .parlay-select').on('click',function(e){
			console.log('FUCK');
			if($('.parlay-panel').is(':visible')){
				$('.parlay-panel').hide();
			}
			else{
				$('.parlay-panel').show();
			}
		});
		// 选择面板里面的过关方式按钮
		$('.parlay-panel .selector button').on('click',function(e){
			
			if($(this).hasClass('selected')){
				$(this).removeClass('selected').addClass('unselect');
			}
			else{
				$(this).removeClass('unselect').addClass('selected');
			}
		});
		// 选择面板取消按钮
		$('.parlay-panel .control .cancel').on('click',function(e){
			$('.parlay-panel').hide();
			// 恢复操作前的状态
			// 1. 先取得订单目前实际的过关方式（操作未保存）
			var nowSelected=order.getParlayList();
			// 2.遍历每个按钮，根据nowSelected的状态更新按钮状态
			$('.parlay-panel .selector button').each(function(index,ele){
				if(nowSelected.indexOf($(ele).data('value').toString())>=0){
					$(this).removeClass('unselect').addClass('selected');
				}
				else{
					$(this).removeClass('selected').addClass('unselect');
				}
			});
		});
		// 选择面板确认按钮
		$('.parlay-panel .control .confirm').on('click',function(e){
			$('.parlay-panel').hide();
			// 在这里保存过关方式
			// 清空按钮文字
			$('.parlay-method .parlay-select').text('');
			var newText='';
			// 将本次选择的过关方式加入到订单当中
			$('.parlay-panel .selector button.selected').each(function(index,ele){
				order.addParlayType($(ele).data('value').toString());
				// 写入按钮文本
				newText+=$(ele).text()+',';
			});
			// 将本次取消选择的过关方式加入到订单当中
			$('.parlay-panel .selector button.unselect').each(function(index,ele){
				order.removeParlayType($(ele).data('value').toString());
			});
			// 删掉最后一个逗号
			newText=newText.substr(0,newText.length-1);
			$('.parlay-method .parlay-select').text(newText);
			updateBottomInfo();
		});
		// 处理倍数选择控件
		var multipleInput=$('.operator-bar .multiple input[type=number]');
		multipleInput.val(order.getMultiple());
		multipleInput.on('blur',function(){
			var newValue=parseInt($(this).val());
			order.setMultiple(newValue);
			console.log(newValue);
			updateBottomInfo();
		})
		$('.operator-bar .multiple .increase').on('click',function(){
			var newValue=order.getMultiple()+1;
			if(newValue>order.setting.maxMultiple)newValue=order.setting.maxMultiple;
			order.setMultiple(newValue);
			console.log(newValue);
			$('.operator-bar .multiple input[type=number]').val(newValue);
			updateBottomInfo();
		});
		$('.operator-bar .multiple .decrease').on('click',function(){
			var newValue=order.getMultiple()-1;
			if(newValue<1)newValue=1;
			order.setMultiple(newValue);
			console.log(newValue);
			$('.operator-bar .multiple input[type=number]').val(newValue);
			updateBottomInfo();
		})

		// 绑定提交按钮点击事件
		$('.sporttery-confirm-bar .submit-btn').on('click',function(){
			var submitBtn=$(this);
			order.submit(); // 保存一下订单信息，以免中断之后丢失
			var balance=parseFloat(pageLib.getCookie('balance'));
			var amount=order.getTotalAmount();
			if(!pageLib.getCookie('access-token')){
				pageLib.alert('未登录，请先登录');
				return;
			}
			if(amount>=balance){
				pageLib.alert('余额不足，请先充值');
				return;
			}
			if(submitBtn.hasClass('disable'))return;
			else submitBtn.addClass('disable').text('提交中...');
			// 创建订单
			pageLib.api({
				action: '/v1/order/create-order',
				data: order.getClearOrderObject(),
				success: function(resp){
					var orderId=resp.data.order_no;
					var amount=resp.data.amount;
					console.log(orderId);
					//判断当前是否允许余额支付
					// if(resp.data.play_list.balance){		// 当前接口不支持判断是否支持余额
						pageLib.api({
							action: '/v1/account/balance-pay',
							data: {
								order_no: orderId
							},
							success: function(resp){
								dataLayer.push({'event':'betSuccess','betAmount':amount});
								window.location.href="payment-result.html?status=success&order_no="+orderId;
								order.clear();
							},
							failed: function(){
								submitBtn.removeClass('disable').text('确认购买');
							},
							error: function(XMLHttpRequest,err,exeption){
								if(XMLHttpRequest.status==401){
									pageLib.alert('未登录，请先登录');
									submitBtn.removeClass('disable').text('确认购买');
								}
							}
						});
					// }
				},
				failed: function(){
					submitBtn.removeClass('disable').text('确认购买');
				},
				error: function(XMLHttpRequest,err,exeption){
					if(XMLHttpRequest.status==401){
						pageLib.alert('未登录，请先登录');
						submitBtn.removeClass('disable').text('确认购买');
					}
				}
			});
		});
	};
	var responseDataOfMatchList=JSON.parse(localStorage.getItem('matchlist'));
	// console.log(responseDataOfMatchList);
	if(responseDataOfMatchList){
		processOfMatchList(responseDataOfMatchList);
	}
	else{
		pageLib.api({
			action: '/v1/app/get-play-list?day=2019-2-2',
			success: processOfMatchList
		});
	}
	
});
</script>
<script id="parlay-button-tpl" type="text/Template7">
{{#each parlay}}
<button{{#if selected}} class="selected"{{else}} class="unselect"{{/if}} data-value="{{index}}001">{{index}}串1</button>
{{/each}}
</script>
<script id="confirm-order-list-cell" type="text/Template7">
<div class="close-time">投注截止：2019-01-21 21:55:00</div>
<div class="addmatch"><a href="sporttery.html">＋ 继续选择比赛</a></div>
<ul class="list arbitrage-list confirm-list">
{{#each _content_obj}}
<li class="content-card" data-matchid="{{_match_info.id}}" data-matchkey="{{_match_info.matchkey}}" data-matchtime="{{_match_info.matchtime}}" data-handicap="{{_match_info.hhad.Handicap}}">
	<div class="selected-match">
		<div class="matchinfo flexer -between">
			<div class="matchkey">{{_match_info.matchkeycn}} {{_match_info.leaguenameabbr}}</div>
			<div class="match-against">
				<span class="home">{{_match_info.home.teamnameabbr}}</span>
				<span class="against">vs</span>
				<span class="away">{{_match_info.away.teamnameabbr}}</span>
			</div>
		</div>
		
		<div class="bet-table">
			<table>
				<tbody>
					{{#if _match_info.had.homewin}}
					<tr data-playtype="had">
						<td>非<br>让<br>球</td>
						<td class="selection" data-selection="homewin">主胜<span class="odds" data-odds="{{_match_info.had.homewin}}">{{formatOdds _match_info.had.homewin}}</span></td>
						<td class="selection" data-selection="draw">平手<span class="odds" data-odds="{{_match_info.had.draw}}">{{formatOdds _match_info.had.draw}}</span></td>
						<td class="selection" data-selection="awaywin">客胜<span class="odds" data-odds="{{_match_info.had.awaywin}}">{{formatOdds _match_info.had.awaywin}}</span></td>
					</tr>
					{{else}}
					<tr>
						<td>非<br>让<br>球</td>
						<td colspan="3">未开售</td>
					</tr>
					{{/if}}
					{{#if _match_info.hhad.homewin}}
					<tr data-playtype="hhad">
						{{#js_if "parseFloat(this._match_info.hhad.Handicap)>0"}}
						<td class="positive-handicap">主<br>{{formatHandicap _match_info.hhad.Handicap}}</td>
						{{else}}
						<td class="negative-handicap">主<br>{{formatHandicap _match_info.hhad.Handicap}}</td>
						{{/js_if}}
						<td class="selection" data-selection="homewin">主胜<span class="odds" data-odds="{{_match_info.hhad.homewin}}">{{formatOdds _match_info.hhad.homewin}}</span></td>
						<td class="selection" data-selection="draw">平手<span class="odds" data-odds="{{_match_info.hhad.draw}}">{{formatOdds _match_info.hhad.draw}}</span></td>
						<td class="selection" data-selection="awaywin">客胜<span class="odds" data-odds="{{_match_info.hhad.awaywin}}">{{formatOdds _match_info.hhad.awaywin}}</span></td>
					</tr>
					{{else}}
					<tr>
						<td class="negative-handicap">让<br>球</td>
						<td colspan="3">未开售</td>
					</tr>
					{{/if}}
				</tbody>
			</table>
		</div>
	</div>
</li>
{{/each}}
</ul>
</div>
</script>
</html>